<template>
<transition name="slide">
  <div class="recommend"  ref="recommend">
   <scroll ref="scroll"class="recommend-content":data="recommends">
     <div>
       <div class="slider-wrapper" v-if="recommends.length">
               <div v-for="item in recommends">
                   <a :href="item.linkUrl">
                       <img class="needsclick"@load="loadImage" :src="item.picUrl" alt="">
                   </a>
               </div>
       </div>

      <!--  <div class="recommend-list">
           <h1 class="list-title">热门歌曲推荐</h1>
           <ul>
               <li @click="selectItem(item)"class="item" v-for="item in discList">
                   <div class="icon">
                       <img v-lazy="item.imgurl" width="60" height="60" alt="" />
                   </div>
                   <div class="text">
                       <h2 class="name" v-html="item.creator.name"></h2>
                       <p class="desc" v-html="item.dissname"></p>
                   </div>
               </li>
           </ul>
       </div> -->
       </div>
       <div class="loading-container" v-show="!recommends.length">
        <Loading></Loading>
       </div>
       </scroll>
       <router-view></router-view>
   </div>
   </transition>
</template>

<script type="text/ecmascript-6">
    import {getRecommend} from 'api/recommend'
    import {ERR_OK} from 'api/config'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'
    export default {
      data () {
        return {
          recommends: []
        }
      },
      created () {
        this._getRecommend()
      },
      methods: {
        selectItem (item) {
          this.$router.push({
            path: `/recommend/${item.dissid}`
          })
          this.setDisc(item)
        },
        _getRecommend () {
          getRecommend().then((res) => {
            if (res.code === ERR_OK) {
              this.recommends = res.data.slider
            }
          })
        },
        loadImage () {
          if (!this.checkLoaded) {
            this.checkLoaded = true
            console.log(this.checkLoaded)
            this.$refs.scroll.refresh()
          }
        }
      },
      components: {
        Scroll,
        Loading
      }
    }
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
@import "~common/stylus/variable"
.recommend
  position: fixed
  width: 100%
  top: 184px
  bottom: 48px
  .recommend-content
    height: 100%
    overflow: hidden
    div
      a
        img
          width:100%
    .recommend-list
      .list-title
        height: 65px
        line-height: 65px
        text-align: center
        font-size: $font-size-medium
        color: $color-theme
    .item
      display: flex
      box-sizing: border-box
      align-items: center
      padding: 0 20px 20px 20px
      .icon
        flex: 0 0 60px
        width: 60px
        padding-right: 20px
      .text
        display: flex
        flex-direction: column
        justify-content: center
        flex: 1
        line-height: 20px
        overflow: hidden
        font-size: $font-size-medium
        .name
          margin-bottom: 10px
          color: $color-text
        .desc
          color: $color-text-d
    .loading-container
      position: absolute
      width: 100%
      top: 50%
      transform:tranformY(-50%)
</style>
